import {connect} from 'react-redux'
import React, {Component} from 'react'
import { Link } from "react-router-dom";

import { Button, List ,Toast} from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;

import Header from "../components/header";
import FooterMenu from "../components/footerMenu";

import {userLogout,getuserBankList} from "../redux/actions/userAction"

export  class Mymoney extends Component {
  constructor (props){
   super(props)
   this.state= {
    uploadedFileCloudinaryUrl: ''
   }
}

   componentWillMount(){
    const {dispatch} = this.props
    dispatch(getuserBankList())
  }
    Logout(){
        const {dispatch, history} = this.props
        Toast.loading("提交中",0)
        dispatch(userLogout((ok,data) => {
          Toast.hide()
          if (ok) {
            history.push("/");
          } else {
            Toast.info(data);
          }
        }));
    }
baseInfo(){
    return {
        selfmoney:[
            {
                title: '提款密码',
                icon: '/static/images/ICON_53.png',
                link: '/withdraw',
                dec: "已绑定",
                isred: false
            }, {
                title: '修改登录密码',
                icon: '/static/images/ICON_53.png',
                link: '/password',
                dec: "",
                isred: true
            }
        ]

    }

}
   render() {
    const {user} = this.props
    let userbanklist = user.get("userbankLists");

      return <div className="mymoney">
          <Header title="我的账户" {...this.props}></Header>
             <div className="container">
          
                <List className="my-self myself-help">
                <Item arrow="horizontal"
                            onClick={() => { userbanklist.length <3 ? this.props.history.push("/my/add/bank") :  Toast.fail("最多绑定3张银行卡")}}
                            ><div className="title">银行卡</div><div className="dec red">绑定本人银行卡快速提现</div></Item> 
                </List>

                <List className="my-self myself-help">
                {this.baseInfo().selfmoney.map((itemself,index)=>{
                    return  <Item key={index}
                           
                            arrow="horizontal"
                            onClick={() => {this.props.history.push("/my/change"+itemself.link)}}
                            ><div className="title">{itemself.title}</div><div className={itemself.isred? "dec red" : "dec"}>{itemself.dec}</div></Item>
                })}
                   
                </List>

             </div>
             <Button type="primary" onClick={()=>{this.Logout()}}>退出登录</Button>

      </div>
   } 
}




function mapStateToProps(state) {
  return {
    user: state.user // gives our component access to state through props.toDoApp
  }
}

export default connect(mapStateToProps)(Mymoney)